<template>
	<view class="content">
		<view class="table-top-box">
			<view class="search-box">
				<view class="search-left-box">
					<uni-search-bar @confirm="search"  v-model="searchValue" @cancel="cancel" @clear="clear" placeholder="输入厂家名称查询">
					</uni-search-bar>
				</view>
				<view class="search-right-box">
					<uni-datetime-picker returnType="timestamp" type="daterange" v-model="shenDate" @change="changeLog" />
				</view>
			</view>
			<view class="table-box" style="display: flex;width: 750;">
				<view :class="tableIndex== 0?'tableChange':'table'" @click="tableChange(0,1)"
					v-if="checkPermi(['develop:unAudit:list'])">
					<text>待审计</text>
					<view class="border">
					</view>
				</view>
				<view :class="tableIndex== '1'?'tableChange':'table'" @click="tableChange(1,2)"
					v-if="checkPermi(['develop:cancel:list'])">
					<text>审计退回</text>
					<view class="border">
					</view>
				</view>
				<view :class="tableIndex== '2'?'tableChange':'table'" @click="tableChange(2,3)"
					v-if="checkPermi(['develop:auditPass:list'])">
					<text>待审核</text>
					<view class="border">
					</view>
				</view>
				<view :class="tableIndex== '3'?'tableChange':'table'" @click="tableChange(3,4)"
					v-if="checkPermi(['develop:assessReject:list'])">
					<text>已拒审</text>
					<view class="border">
					</view>
				</view>
				<view :class="tableIndex== '4'?'tableChange':'table'" @click="tableChange(4,5)"
					v-if="checkPermi(['develop:assessPass:list'])">
					<text>审核通过</text>
					<view class="border">
					</view>
				</view>
			</view>
			<view class="top-bnt" v-if="tableIndex == 0 || tableIndex == 2">
				<view class="top-left-box" v-if="piliangStatus" >
					<image @click="qx1Bnt()" v-if="!quanxuanStatus" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" src="/static/images/index/NotSelected.png" mode="">
					</image>
					<image @click="qx2Bnt()" v-if="quanxuanStatus" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"
						src="/static/images/index/YesSelected.png.png" mode="">
					</image>
					全选
				</view>
				<view class="top-right-box" v-if="checkPermi(['develop:auditPass:piliangBnt'])">
					<view class="piliangBnt" @click="plBnt()" v-if="!piliangStatus && tableIndex == 0 ">
						批量审计
					</view>
					<view class="closeBnt" @click="plBnt()" v-if="piliangStatus">
						取消
					</view>
				</view>
				<view class="top-right-box" v-if="checkPermi(['develop:assessPass:piliangBnt'])">
					<view class="piliangBnt" @click="plBnt()" v-if="!piliangStatus  && tableIndex == 2">
						批量审批
					</view>
					<view class="closeBnt" @click="plBnt()" v-if="piliangStatus">
						取消
					</view>
				</view>
			</view>
		</view>
		<z-paging ref="paging" v-model="dataList" :default-page-size="row" @onRefresh="onRefresh" @query="getList"
			auto-show-system-loading auto-show-back-to-top>
			<view class="" style="margin-top: 280rpx;"></view>
			<view class="list-box" @click="goto(item)" v-for="(item,index) in dataList" :key="index">
				<view class="top-box">
					<view class="tiem-box" v-if="item.type == 0">
						定金
					</view>
					<view class="tiem-box" v-if="item.type == 1">
						尾款
					</view>
					<view class="tiem-box" v-if="item.type == 2">
						全款
					</view>
					<view class="tiem-box" v-if="item.type == 3">
						合并付款
					</view>
					<view class="tiem-box" v-if="item.type == 4">
						运费
					</view>
					<view class="status-box">
						<view class="item-box" v-if="item.assessStatus == 0">
							待审计
						</view>
						<view class="item-box" v-if="item.assessStatus == 1">
							审计退回
						</view>
						<view class="item-box" v-if="item.assessStatus == 2">
							待审核
						</view>
						<view class="item-box" v-if="item.assessStatus == 3">
							已拒审
						</view>
						<view class="item-box" v-if="item.assessStatus == 4">
							审核通过
						</view>
					</view>
				</view>
				<view class="xian"></view>
				<view class="title-box">
					{{item.supplierName}}
				</view>
				<view class="info-box">
					<view class="info-item" v-if="item.totalMoney">
						<view class="info-item-title">
							申请金额
						</view>
						<view class="info-item-text">
							{{item.totalMoney}}
						</view>
					</view>
					<view class="info-item" v-if="item.remainMoney">
						<view class="info-item-title">
							剩余金额
						</view>
						<view class="info-item-text">
							{{item.remainMoney}}
						</view>
					</view>
					<view class="info-item" v-if="item.paidMoney">
						<view class="info-item-title">
							支付金额
						</view>
						<view class="info-item-text">
							{{item.paidMoney}}
						</view>
					</view>
				</view>
				<view class="text-box" v-if="item.bankName">
					供应商银行：{{item.bankName}}
				</view>
				<view class="text-box" v-if="item.bankNo">
					供应商行号：{{item.bankNo}}
				</view>
				<view class="text-box" v-if="item.accountNo">
					供应商账号：{{item.accountNo}}
				</view>
				<view class="xian"></view>
				<view class="bnt-box">
					<view class="bnt-big-box" v-if="!piliangStatus">
	       			<view class="bnt" @click.stop="auditOpen(item,'同意','审计')" v-if="item.assessStatus == 0 && checkPermi(['develop:auditPass:consentBnt'])">
	       				同意
	       			</view>
	       			<view class="bnt" @click.stop="auditOpen(item,'拒绝','审计')" v-if="item.assessStatus == 0 && checkPermi(['develop:auditPass:refuseBnt'])">
	       				拒绝
	       			</view>
					<view class="bnt" @click.stop="auditOpen(item,'同意','审核')" v-if="item.assessStatus == 2 && checkPermi(['develop:assessPass:consentBnt'])">
						同意
					</view>
					<view class="bnt" @click.stop="auditOpen(item,'拒绝','审核')" v-if="item.assessStatus == 2 && checkPermi(['develop:assessPass:refuseBnt'])">
						拒绝
					</view>
					<view class="bnt" @click.stop="goto2(item)" v-if="item.type != 4">
						查看明细
					</view>
	       		</view>
					<view class="" v-if="piliangStatus" @click.stop="dxBnt(item,index)">
						<image v-if="!item.checked" style="width: 40rpx;height: 40rpx;" src="/static/index/NotSelected.png" mode="">
						</image>
						<image v-if="item.checked" style="width: 40rpx;height: 40rpx;" src="/static/index/YesSelected.png.png"
							mode=""></image>
					</view>
				</view>
			</view>
			<view style="height: 200rpx;">

			</view>
		</z-paging>
		<uni-popup ref="auditDialog" :mask-click="false" type="center" :safe-area='false' @touchmove.stop.prevent="">
			<view class="center-box">
				<view v-if="text" class="title-box">{{text}}</view>
				<view class="text-box">
					内容:<input type="text" :value="inputValue" @input="inputSr" placeholder="请输入内容" />
				</view>
				<!-- <view class="text-box">
				签名:<image @click="inputDialogToggle" v-if="!signImg" src="/static/images/index/add.png" style="width: 150rpx;height: 100rpx;" mode=""></image>
				<image @click="inputDialogToggle" v-else :src="baseUrl+signImg" style="width: 150rpx;height: 100rpx;" mode=""></image>
			</view> -->
				<view class="bottom-box">
					<view class="cancel-box" @click="auditClose()">
						取消
					</view>
					<view class="confirm-box" @click="auditAdd()">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="foot-box" v-if="piliangStatus">
			<view class="consentBnt" @click.stop="auditOpenAdd('同意','审计')" v-if="tableIndex == 0">
				同意	
			</view>
			<view class="rejectBnt" @click.stop="auditOpenAdd('拒绝','审计')" v-if="tableIndex == 0">
				拒绝
			</view>
			<view class="consentBnt" @click.stop="auditOpenAdd('同意','审核')" v-if="tableIndex== 2">
				同意
			</view>
			<view class="rejectBnt" @click.stop="auditOpenAdd('拒绝','审核')" v-if="tableIndex == 2">
				拒绝
			</view>
		</view>
		<!-- <uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose"  mode="input" :title="text" :value="inputValue" content="请输入内容：" @close="close" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="inputDialog1" type="dialog">
			<uni-popup-dialog ref="inputClose" :before-close="true"  mode="input" :title="text" :value="inputValue" content="请输入内容：" @close="close1" @confirm="dialogInputConfirm1"></uni-popup-dialog>
		</uni-popup> -->
	</view>
</template>

<script>
	import * as index from '@/api/index.js'
	export default {
		data() {
			return {
				status: '',
				signImg: '',
				inputValue: '',
				infoItem: {},
				text: '',
				searchValue: '',
				tableList: [{
						title: '待审计',
						state: '0',
						show: 'develop:unAudit:list'
					},
					{
						title: '审计退回',
						state: '1',
						show: 'develop:cancel:list'
					},
					{
						title: '待审核',
						state: '2',
						show: 'develop:auditPass:list'
					},
					{
						title: '已拒审',
						state: '3',
						show: 'develop:assessReject:list'
					},
					{
						title: '审核通过',
						state: '4',
						show: 'develop:assessPass:list'
					},

				], //table列表
				row: 10,
				tabList: [],
				tableIndex: '', //当前选择
				dataList: [],
				piliangStatus: false,
				quanxuanStatus: false,
				idS:[],
				shenDate:[]
			}
		},
		onLoad() {
			if (this.checkPermi(['develop:auditPass:list'])) {
				this.tableIndex = 2
			}
		},
		onShow() {
			this.signImg = uni.getStorageSync('signImg')
		},
		methods: {
			dxBnt(item,index) {
				this.dataList[index].checked = !this.dataList[index].checked
			},
			plBnt() {
				this.piliangStatus = !this.piliangStatus
			},
			qx1Bnt() {
				this.quanxuanStatus = !this.quanxuanStatus
				this.dataList.forEach(item=>{
					item.checked = true
				})
			},
			qx2Bnt() {
				this.quanxuanStatus = !this.quanxuanStatus
				this.dataList.forEach(item=>{
					item.checked = false
				})
			},
			// 输入框输入内容
			inputSr(e) {
				this.inputValue = e.detail.value
			},
			auditOpenAdd(text, status) {
				uni.removeStorageSync('signImg')
				this.signImg = ''
				this.inputValue = ''
				this.status = status
				this.text = text
				this.idS = []
				this.dataList.forEach(item=>{
					if(item.checked) {
						this.idS.push(item.id)
					}
				})
				if (this.idS.length == 0) {
					return this.$modal.msgError("请选择数据再提交！")
				}
				this.$refs.auditDialog.open()
			},
			// 打开弹窗
			auditOpen(item, text, status) {
				uni.removeStorageSync('signImg')
				this.signImg = ''
				this.inputValue = ''
				this.status = status
				this.text = text
				// this.infoItem = item
				this.idS[0] = item.id
				this.$refs.auditDialog.open()
			},
			// 关闭审计弹窗
			auditClose() {
				this.$refs.auditDialog.close()
			},
			// 确定审计
			auditAdd() {
				if (!this.inputValue) {
					return this.$modal.msgError("请输入意见！")
				}
				// if (!this.signImg) {
				// 	return this.$modal.msgError("请上传签字！")
				// }
				if (this.status == '审计') {
					if (this.text == '同意') {
						this.infoItem.assessStatus = '2'
					} else {
						this.infoItem.assessStatus = '1'
					}
					this.infoItem.auditOpinion = this.inputValue
					this.infoItem.auditByphoto = this.signImg
					var ids = this.idS.join(',');
					var data = {
						auditOpinion : this.inputValue,
						assessStatus : this.infoItem.assessStatus,
						ids : ids
					}
					console.log(data,'审计')
					index.payApplyAuditBatch(data).then(res => {
						this.$refs.auditDialog.close()
						this.$refs.paging.reload()
						this.auditClose()
						uni.removeStorageSync('signImg')
						this.signImg = ''
						this.inputValue = ''
						this.piliangStatus = false
						this.quanxuanStatus = false
					})
				}
				if (this.status == '审核') {
					if (this.text == '同意') {
						this.infoItem.assessStatus = '4'
					} else {
						this.infoItem.assessStatus = '3'
					}
					this.infoItem.assessOpinion = this.inputValue
					this.infoItem.assessByphoto = this.signImg
					var ids = this.idS.join(',');
					var datas = {
						assessOpinion : this.inputValue,
						assessStatus : this.infoItem.assessStatus,
						ids : ids
					}
					console.log(datas,'审核')
					index.payApplyAssessBatch(datas).then(res => {
						this.$refs.auditDialog.close()
						this.$refs.paging.reload()
						this.auditClose()
						uni.removeStorageSync('signImg')
						this.signImg = ''
						this.piliangStatus = false
						this.quanxuanStatus = false
					})
				}
			},



			// close() {
			// 	this.inputValue = '';
			// 	this.$refs.inputDialog.close()
			// },
			// close1() {
			// 	this.inputValue = '';
			// 	this.$refs.inputDialog1.close()
			// },
			// 审计同意拒绝
			dialogInputConfirm(e) {
				this.inputValue = e
				if (!this.inputValue) {
					return this.$modal.msgError("请输入意见！")
				}
				if (this.text == '同意') {
					this.infoItem.assessStatus = '2'
				} else {
					this.infoItem.assessStatus = '1'
				}
				this.infoItem.auditOpinion = this.inputValue
				index.payApplyAudit(this.infoItem).then(res => {
					this.$refs.paging.reload()
					this.piliangStatus = false
					this.quanxuanStatus = false
					this.close()
				})
			},
			// 审核同意拒绝
			dialogInputConfirm1(e) {
				this.inputValue = e
				if (!this.inputValue) {
					return this.$modal.msgError("请输入意见！")
				}
				if (this.text == '同意') {
					this.infoItem.assessStatus = '4'
				} else {
					this.infoItem.assessStatus = '3'
				}
				this.infoItem.assessOpinion = this.inputValue
				index.payApplyAssess(this.infoItem).then(res => {
					this.$refs.paging.reload()
					this.piliangStatus = false
					this.quanxuanStatus = false
					this.close1()
				})
			},
			// 当页面滚动到底部事件被触发
			onReachBottom() {
				// 通知z-paging滚动到底部了，z-paging会进行相应的处理，例如加载更多数据
				this.$refs.paging.pageReachBottom();
			},
			// 下拉刷新被触发
			onRefresh() {
				// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
				setTimeout(() => {
					this.$tools.toast('刷新成功～')
				}, 500)
			},
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			getList(pageNum, pageSize) {
				// this.$refs.paging.complete(false);
				index.listassessStatus({
					pageNum,
					pageSize,
					assessStatus: this.tableIndex,
					supplierName:this.searchValue,
					orderByColumn: 'isTop asc,nos',
					isAsc: 'desc',
					'params[beginApplyTime]':this.shenDate[0] ? this.$tools.dateFormatSm(this.shenDate[0]) : '',
					'params[endApplyTime]':this.shenDate[1] ? this.$tools.dateFormatSm(this.shenDate[1]) : ''
				}).then(res => {
					console.log(res, '这是什么')
					var data = res.rows
					data.forEach(item=>{
						item.checked = false
					})
					this.$refs.paging.complete(data);
					
				})
			},
			inputDialogToggle(item, e) {
				uni.navigateTo({
					url: '/pagesA/sign/sign'
				})
				// this.infoItem = item
				// this.infoItem.assessOpinion = ''
				// this.text = e
				// this.$refs.inputDialog.open()
			},
			inputDialogToggle1(item, e) {
				this.infoItem = item
				this.infoItem.assessOpinion = ''
				this.text = e
				this.$refs.inputDialog1.open()
			},
			tableChange(item, index) {
				this.tableIndex = item
				this.piliangStatus = false,
				this.quanxuanStatus = false,
				this.$refs.paging.reload()
			},
			goto(item) {
				uni.navigateTo({
					url: '/pagesA/purchaseAdmin/paymentRequest/details/index?id=' + item.id
				})
			},
			goto2(item) {
				uni.navigateTo({
					url: '/pagesA/purchaseAdmin/paymentRequest/commodity/index?id=' + item.id
				})
			},
			search(res) {
				this.$refs.paging.reload()
			},
			cancel() {
				this.searchValue= ''
				this.$refs.paging.reload()
			},
			bindDateChange(e) { // 新增日期选择事件
				// this.daohuoDate = e.target.value
			},
			changeLog(e) {
				console.log('change事件:', e);
				let date = new Date(e);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				this.fahuoDate =  year + "-" + month + "-" + day;
				this.$refs.paging.reload()
			},
			close() {
				this.inputValue = '';
				this.$refs.inputDialog.close()
			},

		}

	}
</script>

<style lang="scss">
	.foot-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 180rpx;
		background: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;

		.rejectBnt {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 346rpx;
			height: 88rpx;
			border-radius: 8rpx;
			border: 2rpx solid rgba(0, 167, 154, 0.44);
			background: #F5F6F8;
			color: #00A79A;
			font-size: 32rpx;
			margin-left: 15rpx;
		}

		.consentBnt {
			margin-left: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 346rpx;
			height: 88rpx;
			border-radius: 8rpx;
			border: 2rpx solid rgba(0, 167, 154, 0.44);
			background: #4D8987;
			color: #FFFFFF;
			font-size: 32rpx;
		}
	}

	.center-box {
		width: 520rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding-top: 50rpx;

		.title-box {
			font-size: 32rpx;
			color: #333333;
			text-align: center;
			padding: 0rpx 100rpx 30rpx;
			border-bottom: 1px solid #F0F0F0;
		}

		.text-box {
			font-size: 28rpx;
			color: #999;
			// text-align: center;
			padding: 30rpx;
			display: flex;
			align-items: center;
		}

		.bottom-box {
			border-top: 2rpx solid #F0F0F0;
			display: flex;
			align-items: center;

			.cancel-box {
				width: 260rpx;
				height: 95rpx;
				font-size: 32rpx;
				text-align: center;
				line-height: 95rpx;
				color: #333333;
				border-right: 2rpx solid #F0F0F0;
			}

			.confirm-box {
				width: 260rpx;
				height: 95rpx;
				background: #2979FF;
				text-align: center;
				line-height: 95rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				border-bottom-right-radius: 16rpx;
			}
		}
	}

	.content {

		// padding-left: 20rpx;
		// padding-right: 20rpx;
		.table-top-box {
			width: 750rpx;
			position: sticky;
			top: 0;
			z-index: 2;
			.search-box {
				width: 750rpx;
				height: 103rpx;
				background: #FFFFFF;
				z-index: 99;
				display: flex;
				align-items: center;
				.search-left-box {
					width: 50%;
				}
				.search-right-box {
					width: 45%;
				}
			}
			.table-box {
				width: 750rpx;
				background: #ffffff;
				display: flex;
				justify-content: space-around;

				.table {
					padding: 23rpx 0;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					display: flex;
					flex-direction: column;
					align-items: center;

					.border {
						margin-top: 10rpx;
						width: 32rpx;
						height: 4rpx;
					}
				}

				.tableChange {
					padding: 23rpx 0;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					display: flex;
					flex-direction: column;
					align-items: center;

					.border {
						margin-top: 10rpx;
						width: 32rpx;
						height: 4rpx;
						background: #8295BC;
					}
				}
			}

			.top-bnt {
				padding-top: 10rpx;
				padding-bottom: 10rpx;
				z-index: 2;
				display: flex;
				align-items: center;
				background-color: #F1F1F1;

				.top-left-box {
					display: flex;
					align-items: center;
					height: 60rpx;
					margin-left: 15rpx;
				}

				.top-right-box {
					margin-left: auto;
					margin-right: 15rpx;

					.piliangBnt {
						width: 160rpx;
						height: 60rpx;
						border-radius: 10rpx;
						background: #FFF;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #4D8987;
						font-size: 24rpx;
					}

					.closeBnt {
						width: 160rpx;
						height: 60rpx;
						border-radius: 10rpx;
						background: #4D8987;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFF;
						font-size: 24rpx;
					}
				}
			}
		}

		.search-box {
			width: 750rpx;
			height: 103rpx;
			background: #FFFFFF;
		}

		.list-box {
			padding-left: 20rpx;
			padding-right: 20rpx;
			margin-top: 20rpx;
			border-radius: 8rpx;
			background: #FFF;

			.top-box {
				display: flex;
				align-items: center;
				padding: 20rpx 0rpx;

				.tiem-box {
					color: #999;
					font-size: 24rpx;
				}

				.status-box {
					margin-left: auto;
					display: flex;
					align-items: center;

					.item-box {
						padding: 4rpx 12rpx;
						height: 42rpx;
						border-radius: 10rpx;
						background: #F5F7FB;
						color: #8295BC;
						font-size: 24rpx;
					}
				}
			}

			.xian {
				width: 662rpx;
				border-bottom: 1px solid #EAEAEA;
			}

			.title-box {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				color: #333;
				font-size: 28rpx;
				font-weight: bold;
			}

			.info-box {
				display: flex;
				align-items: center;
				border-radius: 8rpx;
				background: #F5F7FB;
				padding-top: 10rpx;
				padding-bottom: 10rpx;

				.info-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.info-item-title {
						color: #999;
						font-size: 24rpx;
					}

					.info-item-text {
						margin-top: 8rpx;
						color: #333;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}

			.text-box {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				color: #999;
				font-size: 24rpx;
			}

			.bnt-box {
				padding-top: 20rpx;
				padding-bottom: 20rpx;

				.bnt-big-box {
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.bnt {
						margin-right: 20rpx;
						display: flex;
						align-items: center;
						border-radius: 10rpx;
						background: #F5F7FB;
						padding: 15rpx 20rpx 15rpx 20rpx;
						color: #4D8987;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>